<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>test touch event</title>
	<style>
		body {
			/*height: 2000px;*/
		}
		#test {
			position: fixed;
			left:0;
			right:0;
			top: 0;
			min-height: 60px;
			
		}
		ul li {
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div id="test">
	</div>
	<div id="pro" style="padding:20px;margin-top:300px;">
			<ul>
				<li>
					<button id="a">first button</button>
				</li>
				<li>
					<button id="b">second button</button>
				</li>
			</ul>
	</div>
	<script type="text/javascript">
		$ = function(selector, context){
			return (context || document).querySelector(selector);
		}
		$$ = function(selector, context){
			return (context || document).querySelectorAll(selector);
		}
		id = function(id, context){
			return (context || document).getElementById(id)
		}
	</script>
	<script type="text/javascript" src="touchEvent.js"></script>
	<script>
		var pro = id('pro');
		var a = id('a');
		var b = id('b');
		pro.addEventListener('tap', function(e){
			console.log('tap on pro');
		});
		a.addEventListener('tap', function(e){
			e.stopPropagation();
			console.log('tap on a');

		});
		b.addEventListener('tap', function(e){
			e.stopPropagation();
			console.log('tap on b');
		});
	</script>
</body>
</html>

